آموزش توسعه برنامه های کاربردی وب پیشرو [ویدئو]

Progressive Web Application Development [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: این دوره آموزشی به شما می آموزد که چگونه با استفاده از Cache API برنامه های کاربردی وب پیشرفته و قابل کشف و جذاب بسازید تا کارکنان خدماتی را آماده آفلاین و سریع کند تا درخواست های شبکه و مانیفست های برنامه های وب را رهگیری کنند، بنابراین از ویژگی های مشابه بومی استفاده کنند. ما با معرفی مفاهیم اصلی برنامه های وب مترقی شروع می کنیم، هر یک از آنها را با جزئیات توضیح می دهیم و با پیاده سازی آنها در یک برنامه آماده تولید به پایان می رسانیم. یک سرویسکار ابزار اصلی PWA است. در این دوره، شما بر قدرت API های جدید از جمله Fetch API، وعده ها و موارد دیگر مسلط خواهید شد. کاربران خود را در صورت قطع شدن اتصال به اینترنت از دست ندهید. برای همگام سازی داده ها در زمانی که برنامه شما آفلاین است، از استراتژی های کش و درخواست شبکه قدرتمند استفاده کنید. با افزودن اعلان‌های فشاری، نحوه بهبود تعامل کاربر با برنامه‌هایتان را بیاموزید. ما همچنین مانیفست‌های برنامه را به طور عمیق پوشش می‌دهیم تا به کاربران شما اجازه دهیم برنامه شما را به صفحه اصلی تلفن همراه خود اضافه کنند و برنامه را به آسانی مانند برگه کردن روی نماد برنامه وب باز کنند، درست مانند سایر برنامه‌های تلفن همراه بومی. آنها همچنین در حالی که نوار آدرس وجود ندارد گشت و گذار می کنند. تجربه کاربر به دلیل اضافه شدن صفحه نمایش اسپلش، پوسته برنامه، رنگ پیش فرض بومی و موارد دیگر مانند یک برنامه تلفن همراه بومی است. ابزارها همیشه هنگام توسعه نرم افزار مفید هستند. بنابراین، این دوره به شما می آموزد که چگونه با استفاده از Workbox، بهره وری خود را افزایش دهید، تا مدیریت کارکنان خدمات را بسیار آسان تر کنید، و Lighthouse، برای نشان دادن امتیاز PWA خود و نحوه دستیابی به 100/100. تمام موضوعات این دوره به یک پروژه عملی تبدیل می شود که در پایان دوره آماده استقرار به تولید می شود. برای اطمینان از اینکه برنامه بعداً برای هر نوع پروژه مفید است و همچنین می توانید همه چیز را عمیقاً یاد بگیرید، پروژه دوره در JS/CSS/HTML خالص ایجاد شده است. آخرین اما نه کم‌اهمیت، SPAها (برنامه‌های تک صفحه‌ای) فوق‌العاده حیاتی هستند، زیرا این روزها نقش پیشرو در توسعه وب و ساخت برنامه‌های تلفن همراه ترکیبی و بومی دارند. بنابراین، این دوره آموزشی به شما نشان می‌دهد که چگونه می‌توانید از Angular، React، Ember و Vue.js برای ساختن یک برنامه وب پیشرفته استفاده کنید. تمام کدها و فایل های پشتیبانی این دوره در Github در https://github.com/PacktPublishing/Progressive-Web-Application-Development موجود است • برنامه های وب بسازید که شبیه برنامه های تلفن همراه بومی هستند. • از فن آوری های جدید وب مانند Fetch API و وعده ها استفاده کنید. • حسابرسی و بهبود PWA با ابزارهای مختلف • یک برنامه موجود را به PWA تبدیل کنید • سرعت برنامه وب خود را با کمک پیشرفت ها و رویکردها افزایش دهید. • با استفاده از اعلان‌های فشار، تعامل کاربر را افزایش دهید • جزئیات در عمق در مورد کارگران خدمات • ذخیره سازی آفلاین و API های ذخیره سازی مختلف. هدف این دوره توسعه دهندگان و مهندسانی است که می خواهند برنامه های وب فوق العاده سریع بسازند. دانش اولیه HTML و CSS مفید خواهد بود، اما اجباری نیست • درک اینکه چرا PWA ها مهم هستند و چه چیزی را حل می کنند * • یادگیری مفاهیم اصلی PWA و نحوه پیاده سازی آنها در یک برنامه موجود یا ساخت از ابتدا * •عمق عملی درس‌هایی در مورد کارگران خدمات، Fetch API، وعده‌ها، اعلان‌های فشاری، ذخیره‌سازی حافظه پنهان و مانیفست‌های برنامه. * یاد بگیرید که چگونه یک برنامه کاربردی یک صفحه (SPAs) را به PWA تبدیل کنید. *

سرفصل ها و درس ها

مقدمه ای بر PWA Introduction to PWA

  • بررسی اجمالی دوره The Course Overview

  • واقعا PWA چیست؟ What Really is a PWA?

  • مفاهیم اصلی PWA PWA Core Concepts

  • الگوی PRPL چیست؟ What is PRPL Pattern?

  • نسخه ی نمایشی پروژه دوره نهایی Demo of Final Course Project

  • رابط کاربری پاسخگو Responsive UI

  • بررسی اجمالی و راه اندازی ابزارها Tools Overview and Setup

درک مانیفست برنامه وب Understanding Web App Manifest

  • آشنایی با ویژگی‌های مانیفست برنامه Understanding App Manifest Properties

  • Properties را به manifest.json اضافه کنید Add Properties to manifest.json

  • پیش نیازهای نصب برنامه وب Prerequisites for Installing Web App

  • شبیه ساز اندروید را اجرا کنید و از ابزارهای توسعه دهنده کروم برای اشکال زدایی استفاده کنید Run Android Emulator and Leverage Chrome Dev Tools for Debugging

  • افزودن خواص برای سافاری Add Properties for Safari

  • افزودن خواص برای اینترنت اکسپلورر Add Properties for Internet Explorer

کارگر خدمات Service Worker

  • Promise API Promise API

  • واکشی API Fetch API

  • کارگر خدماتی چیست و چگونه کار می کند؟ What Is a Service Worker and How it Works?

  • رویدادها در سرویس کارگر Events in Service Worker

  • چرخه عمر کارگر خدماتی Service Worker Lifecycle

  • محدوده کار برای یک کارگر خدماتی Scope Working for a Service Worker

  • ثبت نام، به روز رسانی، فعال کردن SW Register, Update, Activate SW

  • کارمند خدمات ما را اشکال زدایی کنید Debug Our Service Worker

  • بنر برنامه را نصب کنید و روی آن کنترل کنید Install App Banner and Control Over it

  • اشکال زدایی و تست روی دستگاه شبیه سازی شده اندروید Debug and Test on Android Emulated Device

  • با پروژه نهایی برنامه ما تمرین کنید Practice with Our Final App Project

کش و پشتیبانی آفلاین Cache and Offline Support

  • گزینه های ذخیره سازی Storage Options

  • Cache API Cache API

  • پیش ذخیره سازی/ذخیره سازی استاتیک Pre-Caching/Static Caching

  • نمای کلی ES6 ES6 Overview

  • افزودن، به روز رسانی کش Add, Update Cache

  • با کش پاسخ دهید Respond with Cache

  • ذخیره دینامیک هنگام واکشی Dynamic Caching Upon Fetch

  • متغیرهای پاسخ آفلاین Offline Respond Placeholders

  • حذف/پاکسازی کش ها Remove/Cleanup Caches

  • استراتژی های ذخیره سازی Caching Strategies

  • با پروژه نهایی برنامه ما تمرین کنید Practice with Our Final App Project

حافظه پنهان محتوای پویا Dynamic Content Cache

  • IndexedDB/Write Data IndexedDB / Write Data

  • IndexedDB/بازیابی و حذف IndexedDB / Retrieve and Delete

  • ابزارهایی برای کمک به ایجاد کش و سرویس‌کار Tools to Help Create Cache and Service Worker

  • با پروژه نهایی برنامه ما تمرین کنید Practice with Our Final App Project

استقرار در Firebase Deployment to Firebase

  • Firebase CLI را راه اندازی کنید Setup Firebase CLI

  • برنامه ما را برای استقرار آماده کنید Make Our App Ready to Deploy

  • در Firebase مستقر شوید Deploy to Firebase

همگام سازی پس زمینه Background Sync

  • چگونه همگام سازی پس زمینه کمک می کند How Background Sync Helps

  • ثبت یک کار همگام سازی Register a Synchronization Task

  • ذخیره داده های ما در IndexedDB و Firebase Storing Our Data in IndexedDB and Firebase

  • همگام سازی داده ها در Server Worker با سرور Syncing Data in Server Worker with Server

  • همگام سازی دوره ای Periodic Sync

Push Notification Push Notification

  • اصول Push Notification Fundamentals Push Notification Fundamentals

  • درخواست مجوز، اشتراک و اعلان نمایش Request Permission, Subscription, and Display Notification

  • اشتراک مشتری را ذخیره کنید و آن را در Backend ایمن کنید Store Client Subscription and Secure It in Backend

  • ارسال اعلان از سرور و گوش دادن از سرویس کارگر Send Notification from Server and Listen from Service Worker

  • پاک کردن اشتراک ها Clean Up Subscriptions

PWA با SPA PWA with SPA

  • PWA در یک برنامه Angular PWA in an Angular App

  • PWA در برنامه React PWA in a React App

  • PWA در یک برنامه Vue PWA in a Vue App

  • PWA در یک برنامه Ember PWA in an Ember App

نمایش نظرات

آموزش توسعه برنامه های کاربردی وب پیشرو [ویدئو]
جزییات دوره
7 h 3 m
56
Packtpub Packtpub
(آخرین آپدیت)
از 5
ندارد
دارد
دارد
Majid Hajian
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Majid Hajian Majid Hajian

مجید یک Google Developer Expert (GDE) برای Flutter and Dart و یک توسعه دهنده نرم افزار پرشور با سالها توسعه و معماری برنامه های پیچیده وب و موبایل است. احساسات او به طور کلی Flutter ، PWA و عملکرد است. او نویسنده کتاب برنده جایزه Apress است. او یک رهبر جامعه است و عاشق به اشتراک گذاشتن دانش خود با جامعه با نوشتن ، صحبت کردن ، آموزش ، کمک به منبع باز و سازماندهی رویدادهای فنی است. او همچنین برگزارکننده چندین کنفرانس و گردهمایی بزرگ نوردیک مانند FlutterVikings است!